<block name="style">
    <link rel="stylesheet" href="__CSS__/count.css">
</block>
<div class="col-md-12">
    <div class="count_common_box">
        <div class="with-padding-lg" style="position: relative">
            <button class="btn  pull-right" data-toggle="modal" data-target="#settingCount"
                    style="position: absolute;right: 15px;z-index: 999">
                <i class="icon-cog"></i>
                {:L('_SETTINGS_')}
            </button>
            <div id="myChart" height="400"></div>
        </div>
    </div>
</div>
<!--ChartJS 图表 Start-->
<div class="col-md-6" data-id="count_active_day">
    <div class="count_common_box">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-blue bold uppercase">日活跃用户统计</span>
        </div>
    </div>
    <div class="portlet-body">
        <div class="chart" style="height: 477px;">
            <canvas id="dayActiveChart" style="width:100%;height:477px"></canvas>
        </div>
        <div class="scroller-footer">
            <div class="btn-arrow-link pull-right">
                <a href="{:U('Count/active',array('type'=>'day'))}">查看更多</a>
                <i class="icon-arrow-right"></i>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    </div>
</div>
<div class="col-md-6" data-id="count_active_week">
    <div class="count_common_box">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-blue bold uppercase">周活跃用户统计</span>
        </div>
    </div>
    <div class="portlet-body">
        <div class="chart" style="height: 477px;">
            <canvas id="weekActiveChart" style="width:100%;height:477px"></canvas>
        </div>
        <!--图标插入位置-->
        <div class="scroller-footer">
            <div class="btn-arrow-link pull-right">
                <a href="{:U('Count/active',array('type'=>'week'))}">查看更多</a>
                <i class="icon-arrow-right"></i>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    </div>
</div>
<div class="col-md-6" data-id="count_active_month">
    <div class="count_common_box">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-blue bold uppercase">月活跃用户统计</span>
        </div>
    </div>
    <div class="portlet-body">
        <div class="chart" style="height: 477px;">
            <canvas id="monthActiveChart" style="width:100%;height:477px"></canvas>
        </div>
        <!--图标插入位置-->
        <div class="scroller-footer">
            <div class="btn-arrow-link pull-right">
                <a href="{:U('Count/active',array('type'=>'month'))}">查看更多</a>
                <i class="icon-arrow-right"></i>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    </div>
</div>

<div class="col-md-6 remain" data-id="count_remain">
    <div class="count_common_box">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-blue bold uppercase">新注册用户前8日留存率统计</span>
        </div>
        <div class="actions">
            <div class="checkbox_block">
                <label class="day1_label"><input type="checkbox" name="day_show[]" value="day1" checked/>次日</label>
                <label class="day2_label"><input type="checkbox" name="day_show[]" value="day2" checked/>2日</label>
                <label class="day3_label"><input type="checkbox" name="day_show[]" value="day3" checked/>3日</label>
                <label class="day4_label"><input type="checkbox" name="day_show[]" value="day4" checked/>4日</label>
                <label class="day5_label"><input type="checkbox" name="day_show[]" value="day5" checked/>5日</label>
                <label class="day6_label"><input type="checkbox" name="day_show[]" value="day6" checked/>6日</label>
                <label class="day7_label"><input type="checkbox" name="day_show[]" value="day7" checked/>7日</label>
                <label class="day8_label"><input type="checkbox" name="day_show[]" value="day8" checked/>8日</label>
            </div>
        </div>
    </div>
    <div class="portlet-body" style="height: 498px;">
        <table class="remain-table">
            <thead>
            <tr>
                <th style="width: 80px;">日期</th>
                <th style="width: 80px;">注册人数</th>
                <th>留存率</th>
            </tr>
            </thead>
            <tbody id="remain_data">
                <include file="Count/_remain_data"/>
            </tbody>
        </table>
        <div class="scroller-footer">
            <div class="btn-arrow-link pull-right">
                <a href="{:U('Count/remain')}">查看更多</a>
                <i class="icon-arrow-right"></i>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    </div>
</div>

<div class="col-xs-12" data-id="count_lost">
    <div class="count_common_box">
    <div class="portlet-title">
        <div class="caption text-center">
            <span class="caption-subject">用户流失率统计</span>
        </div>
    </div>
    <div class="portlet-body">
        <table id="table-data" class="table table-bordered table-striped table-hover">
            <!-- 表头 -->
            <thead>
            <tr>
                <th>日期</th>
                <th>用户总数</th>
                <th>流失用户总数</th>
                <th>新增流失用户数</th>
                <th>用户流失率</th>
                <th>创建时间</th>
            </tr>
            </thead>

            <!-- 列表 -->
            <tbody>
            <volist name="lostList" id="oneLost">
                <tr>
                    <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$oneLost['date']}</td>
                    <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$oneLost['user_num']}</td>
                    <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$oneLost['lost_num']}</td>
                    <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$oneLost['new_lost']}</td>
                    <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$oneLost['rate']}</td>
                    <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$oneLost['create_time']|time_format}</td>
                </tr>
            </volist>
        </table>
        <div class="scroller-footer">
            <div class="btn-arrow-link pull-right">
                <a href="{:U('Count/lost')}">查看更多</a>
                <i class="icon-arrow-right"></i>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    </div>
</div>
<!-- ChartJS 1.0.1 -->
<script src="__ZUI__/lib/chart/zui.chart.min.js"></script>
<script>
$(function(){
//图表配置项
    var options = {
        ///Boolean - 是否在图表上显示网格
        scaleShowGridLines : true,

        //String - 网格线条颜色
        scaleGridLineColor : "rgba(0,0,0,.05)",

        //Number - 网格宽度
        scaleGridLineWidth : 1,

        //Boolean - 是否显示水平坐标，即X轴
        scaleShowHorizontalLines: true,

        //Boolean - 是否显示垂直坐标，即Y轴
        scaleShowVerticalLines: true,

        //Boolean - 是否显示为平滑曲线
        bezierCurve : true,

        //Number - 平滑曲线时所使用的贝塞尔曲线参数
        bezierCurveTension : 0.4,

        //Boolean - 是否显示顶点
        pointDot : true,

        //Number - 顶点半径，单位像素
        pointDotRadius : 4,

        //Number - 顶点描边线条宽度，单位像素
        pointDotStrokeWidth : 1,

        //Number - 检测鼠标点击所使用依据的半径大小，单位像素
        pointHitDetectionRadius : 20,

        //Boolean - 是否
        datasetStroke : true,

        //Number - 数据集线条宽度，单位为像素
        datasetStrokeWidth : 2,

        //Boolean - 是否用颜色来填充数据集
        datasetFill : true,

    }; // 图表配置项，可以留空来使用默认的配置
    var activeList={$activeList};
    var dayLineChartData={
        labels: activeList.labels,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: activeList.datas.num
            }
        ]
    }
    var weekActiveList={$weekActiveList};
    var weekLineChartData={
        labels: weekActiveList.labels,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: weekActiveList.datas.num
            }
        ]
    }
    var monthActiveList={$monthActiveList};
    var monthLineChartData={
        labels: monthActiveList.labels,
        datasets: [
            {
                fillColor: "rgba(23,182,200,0.2)",
                strokeColor: "rgba(23,182,200,1)",
                pointColor: "rgba(23,182,200,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: monthActiveList.datas.num
            }
        ]
    }
    var refreshChart=function($tag){
        switch ($tag){
            case 'count_active_day':
                var lineChartCanvas = $("#dayActiveChart").lineChart(dayLineChartData,options);
                break;
            case 'count_active_week':
                var lineChartCanvas = $("#weekActiveChart").lineChart(weekLineChartData, options);
                break;
            case 'count_active_month':
                var lineChartCanvas = $("#monthActiveChart").lineChart(monthLineChartData, options);
                break;
            default :;
        }
    }

    refreshChart('count_active_day');
    refreshChart('count_active_week');
    refreshChart('count_active_month');
});
</script>
<!--ChartJS 图表 End-->